body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: Verdana, serif;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.PageComplete{
    display: flex;
    flex-direction: column;
    min-height: 92.4vh; /* S'étend sur toute la hauteur de l'écran */
}

/* Bandeau + Bouton rendez-vous */
.ContainerBandeau {
    display: flex;
    position: fixed; /* Fixe le bandeau en haut de l'écran */
    top: 0; /* Aligne le bandeau en haut de l'écran */
    left: 0; /* Aligne le bandeau à gauche de l'écran */
    width: 100%;
    height: 65px;
}

.Bandeau {
    width: 100%;
    height: 45px;
    background-color: #252525;
}

.SelectionDrapeau {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    margin: 0;
}

.SelectionDrapeau > li {
    position: relative;
    display: inline-block;
}

.SelectionDrapeau > li > img {
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.SelectionDrapeau li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 1;
}

.SelectionDrapeau li:hover ul {
    display: block;
}

.SelectionDrapeau .defilable img {
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.BoutonRendezVous {
    position: absolute;
    bottom: 0; /* Pour mettre le bouton le plus bas possible du container */
    right: 3%; /* À droite mais 3% comme marge */
    background-color: red; /* Définit la couleur du bouton en rouge */
    color: white; /* Couleur du texte pour le contraste avec le rouge */
    width: 165px; /* Largeur */
    height: 45px; /* Hauteur */
    display: flex; /* Pour centrer le texte verticalement et horizontalement */
    justify-content: center; 
    text-align: center; 
    align-items: center;
    text-decoration: none; /* Le soulignement sous le bouton */
}

.CompensationBandeau {
    margin-top: 65px; /* Compense la hauteur du bandeau */
}

.ContainerBody {
    min-height: 800px;
    flex-grow: 1;
}

.ContainerReference {
    width: calc(100% - 32%);
    margin-left: 16%;
    margin-right: 16%;
}

@media (max-width: 1340px) {
    .ContainerReference {
        width: calc(100% - 24%);
        margin-left: 12%;
        margin-right: 12%;
    }  
}

@media (max-width: 768px) {
    .ContainerReference {
        width: calc(100% - 12%);
        margin-left: 6%;
        margin-right: 6%;
    }
}

@media (max-width: 480px) {
    .ContainerReference {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .BoutonRendezVous {
        position: absolute;
        bottom: 0; /* Pour mettre le bouton le plus bas possible du container */
        right: 10%; /* À droite mais 3% comme marge */
        background-color: red; /* Définit la couleur du bouton en rouge */
        color: white; /* Couleur du texte pour le contraste avec le rouge */
        width: 165px; /* Largeur */
        height: 45px; /* Hauteur */
        display: flex; /* Pour centrer le texte verticalement et horizontalement */
        justify-content: center; 
        text-align: center; 
        align-items: center;
        text-decoration: none; /* Le soulignement sous le bouton */
    }
    
}

/* Les logos du site */
.ContainerLogo {
    width: 100%;
    height: 85px;
}

/* Image logo */
.ContainerLogo img {
    object-fit: cover; /* Permet à l'image de se redimensionner proportionnellement */
    max-height: 85px; 
}

.Logo1 {
    justify-content: left; /* Met le logo à gauche */
    max-width: 30%;
}

/* Barre de boutons */
.navbar a {
    text-decoration: none;
}

.navbar ul {
    text-decoration: none;
}
.navbar li {
    text-decoration: none;
}

.navbar-nav ul {
    background-color: white;
    display: flex;
    list-style-type: none;
    margin: 2px;
    padding: 0;
    margin: 0;
}

.libar {
    margin: 10px;
}

.defilable {
    margin: 0px;
}

.navbar-nav li:hover ul {
    display: block;
    margin: 0px;
}

.navbar-nav li ul {
    display: none;
    position: absolute;
    background-color: white; /* Couleur de fond */
    padding: 0px;
    z-index: 0;
}

.trait {
    margin-top: 2%;
    margin-bottom: 2%;
}

.ImagePagePrincipale {
    width: 100%; 
}

.ImagePagePrincipale img {
    width: 100%; 
    max-height: 350px;
}

/* Description du magasin */

/* Titre description */
.Description {
    width: 100%; 
}

.CorpsDescription {
    display: flex;
    flex-wrap: wrap; /* empilera les éléments du formulaire si il n'y a pas asssez de place*/
    width: 100%;
    flex-direction: row;
}

.TitreDescription {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
    width: 100%;
}

.TitreDescription::before, .TitreDescription::after {
    content: '';
    flex-grow: 1;
    border-top: 1px solid #000; /* Reproduit l'apparence du <hr> */
    height: 0;
}

.TitreDescription::before {
    margin-right: 10px;
}

.TitreDescription::after {
    margin-left: 10px;
}

.TitreDescription h1 {
    background: #fff;
    padding: 0 10px;
    margin: 0;
}

.ImageDescription {
    max-width: 22%;
    margin: auto;
}

.ImageDescription img {
    max-width: 100%;
    width: 100%;
}

.CompensationPage {
    text-align: center;
    margin-top: 10px ;
    width: 100%;
}

.BandeauNoirInf {
    display: flex;
    background-color: #252525;
    width: 100%;
    height: 100px;
    align-items: center;
    text-align: center;
}

.TexteBandeauNoirInf {
    color: white;
    padding-left: 20%;
    margin-right: 20%;
    margin-bottom: 2%;
    text-align: center;
}

.ConnexionAdmin {
    color: white;
    position: absolute;
    right: 20px; /* Aligne à droite avec un espace */
}

@media (max-width: 1340px) {
    .ImageDescription {
        max-width: 22%;
        margin: auto;
    }
    
}

@media (max-width: 768px) {
    .ImageDescription {
        max-width: 100%;
        margin: auto;
    }
    .ImageDescription img {
        max-width: 100%;
        margin: auto;
    }
}

@media (max-width: 480px) {
    .ImageDescription {
        max-width: 100%;
        margin: auto;
        display: none;
    }

    .ImageDescription img {
        width: 100%;
        display: none;
    }

    .ConnexionAdmin {
        color: white;
        position: absolute;
        right: 0px; /* Aligne à droite avec un espace */
    }
}

/* Texte description */

.alinea {
    text-indent: 40px;
}

.SautDeLigne {
    margin-top: 1%;
}

@media (max-width: 1000px) {
    .CorpsDescription {
        flex-direction: column; /* Modifie la disposition pour afficher l'image au-dessus du texte */
        width: 100%;
    }

    .ImageDescription {
        width: 100%;
        max-height: 200px;
    }

    .ImageDescription img {
        max-width: 100%;
        height: auto;
        max-height: 200px;
    }

    .TexteDescription {
        width: 100%;
        margin: 0; /* Supprime les marges pour maximiser l'espace */
    }
}

@media (min-width: 1000px) {
    .TexteDescription {
        width: 67%;
    }
}